'use client'

import React from 'react';
import Timeline from '@/app/organic-tea/components/Timeline';
import Marquee from 'react-fast-marquee';
import LazyImage from '@/components/LazyImage';
import MediaCarousel from '@/app/good-tea/components/MediaCarousel';
import VideoPlayer from '@/components/VideoPlayer';
import { ComponentConfig } from './DroppedComponent';

interface PreviewModeProps {
  components: ComponentConfig[];
  onClose: () => void;
}

export default function PreviewMode({ components, onClose }: PreviewModeProps) {
  const renderComponent = (component: ComponentConfig) => {
    const { type, properties } = component;
    
    switch (type) {
      case 'timeline':
        return <Timeline timelineData={properties.timelineData || []} />;
      
      case 'marquee':
        return (
          <Marquee 
            direction={properties.direction || "left"} 
            speed={properties.speed || 20} 
            gradient={false} 
            className="mb-4"
          >
            {(properties.images || []).map((img: string, i: number) => (
              <div key={i} className="mx-4">
                <img
                  src={img}
                  alt={`Marquee image ${i + 1}`}
                  className={properties.className || "h-50 w-auto object-contain"}
                />
              </div>
            ))}
          </Marquee>
        );
      
      case 'image':
        return (
          <LazyImage 
            src={properties.src || "/placeholder.jpg"} 
            alt={properties.alt || ""} 
            className={'w-full h-full object-contain'} 
          />
        );
      
      case 'carousel':
        return (
          <MediaCarousel 
            items={properties.items || []} 
            autoplayDelay={properties.autoplayDelay || 1000} 
            width={properties.width || "86%"} 
            autoplay={properties.autoplay !== false} 
          />
        );
      
      case 'video':
        return (
          <VideoPlayer 
            src={properties.src || ""} 
            className={"w-full h-auto"}
            objectFit={properties.objectFit}
            autoPlay={properties.autoPlay}
          />
        );
      
      case 'iframe':
        return (
          <iframe 
            src={properties.src || "https://www.example.com"} 
            className={"w-full h-96 border rounded"} 
            allowFullScreen
            title="嵌入网页"
          />
        );
      
      default:
        return <div>未知的组件类型</div>;
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex">
      {/* Preview area */}
      <div className="flex-1 bg-white overflow-auto">
        <div className="sticky top-0 bg-white border-b border-gray-200 p-4 flex justify-between items-center">
          <h2 className="text-xl font-bold">预览模式</h2>
          <button
            onClick={onClose}
            className="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600"
          >
            关闭预览
          </button>
        </div>
        
        <div className="p-6">
          {components.length === 0 ? (
            <div className="text-center text-gray-500 py-20">
              <p className="text-lg">没有组件可预览</p>
            </div>
          ) : (
            components.map((component) => (
              <div key={component.id} className="mb-8">
                {renderComponent(component)}
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
}